<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/js/echarts.js"></script>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <h1>{{ table_name }}</h1>
    </div>
    <div class="row">
        <div id="main" style="height: 600px;">
        </div>
    </div>
</div>
</body>
<script>
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        data: {{ element|safe }}
      },
      toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ['line', 'bar', 'stack'] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      xAxis: [
        {
          type: 'category',
          axisTick: { show: false },
          data: {{ xAxis_data|safe }}
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: {{ series|safe }}
    };

    option && myChart.setOption(option);
</script>

</html>